<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false" :style="{margin:'0 -24px',padding:0}">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="选择村庄">
                <a-select :allowClear="true" v-model="formData.village_id" placeholder="请选择村庄" default-value="0">
                  <a-select-option :value="item.village_id" v-for="(item , index) in villageList" :key="index"> {{ item.village_name }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="选择时间">
                <a-date-picker
                  mode="year"
                  placeholder="请选择年份"
                  format="YYYY"
                  :value="time"
                  :open="yearPickShow"
                  @change="alt"
                  @panelChange="handlePanelChange"
                  @openChange="handleOpenChange" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="选择季度">
                <a-select :allowClear="true" v-model="formData.season" placeholder="请选择" default-value="0">
                  <a-select-option value="1">第一季度</a-select-option>
                  <a-select-option value="2">第二季度</a-select-option>
                  <a-select-option value="3">第三季度</a-select-option>
                  <a-select-option value="4">第四季度</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="23" :sm="24">
              <span class="table-page-search-submitButtons" style="float: right;">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="emptyFormData">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
        <div class="table-page-search-wrapper">
          <template>
            <s-table
              ref="table"
              size="default"
              :columns="columns"
              rowKey="data_id"
              :data="loadData">
              <span slot="serial" slot-scope="text, record, index">
                {{ index + 1 }}
              </span>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="onDetail(record)">详情</a>
                </template>
              </span>
            </s-table>
          </template>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import {
    rankList
  } from '@/api/bank'
  import {
    villageList
  } from '@/api/common'
  import {
    STable
  } from '@/components'
  let self
  export default {
    name: 'AdminRankData',
    components: {
      STable
    },
    data () {
      return {
        data: [],
        pagination: {},
        loading: false,
        villageList: [],
        yearPickShow: false,
        formData: {
          village_id: '',
          year: '',
          season: '',
          page: 1,
          per_page: 20
        },
        time: '',
        // 表头
        columns: [{
            title: '季度汇总ID',
            scopedSlots: { customRender: 'serial' }
          },
          {
            title: '村庄',
            dataIndex: 'village_name'
          },
          {
            title: '排名年份',
            dataIndex: 'year'
          },
          {
            title: '季度',
            dataIndex: 'season'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 列表组件 加载家风银行列表
        loadData: async parameter => {
          this.formData['page'] = parameter.pageNo
          this.formData['per_page'] = parameter.pageSize
          try {
            this.formData['year'] = this.formData['year']['_d'].getFullYear()
          } catch {}
          const res = await rankList(this.formData)
          const result = {
            pageNo: 1,
            totalPage: 1,
            data: res.data,
            pageSize: res.data.length,
            totalCount: res.data.length
          }
          return Promise.resolve(result)
        },
        options: {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
      }
    },
    filters: {

    },
    mounted () {
      this.getVillageList()
    },
    created () {
      self = this
    },
    computed: {
    },
    methods: {
      onDetail (e) {
        this.$router.push({
          path: '/admin/bank/rank-data-detail',
            query: e
          }
        )
      },
      alt () {
        // 清空年份数据
        self.time = ''
        this.formData.year = undefined
      },
      emptyFormData () {
        self.formData = {
          village_id: '',
          year: '',
          season: '',
          page: 1,
          per_page: 20
        }
        self.time = ''
        this.$refs.table.refresh(true)
      },
      handleOpenChange (status) {
        // 监听年份日历被打开
        self.yearPickShow = status
      },
      // 得到年份选择器的值
      handlePanelChange (value) {
        self.formData.year = value
        self.time = value
        self.yearPickShow = false
      },
      getVillageList () {
        // 获取村庄列表
        villageList().then((res) => {
          this.villageList = res.list
        })
      },
      onShowSizeChange (current, pageSize) {
        this.page.pageSize = pageSize
      }
    }
  }
</script>
